<template>
  <div @mouseleave="mouseleave(-1, '')">
    <p class="copyTextBoxWrap">
      <button
        type="button"
        v-sdc
        class="copyBtn"
        v-show="tableIndex == index && currentHover == columnName && isShowCopy"
        v-clipboard:copy="copyTextName"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
      >
        复制
      </button>
    </p>
    <el-popover
      popper-class="popover-self"
      placement="bottom"
      title=""
      width="190"
      trigger="manual"
      v-model="visible"
    >
      <span
        v-html="copyTextName || '--'"
        ref="showCopyBtn"
        class="copyTextBox"
        slot="reference"
        @mouseover="mouseOver(tableIndex, columnName)"
      ></span>
      <!-- 针对有的页面是标签显示问题 -->
      <span
        v-html="copyTextName || '--'"
        @mouseover="mouseOver(tableIndex, columnName)"
        @mouseleave="mouseleave(-1, '')"
      ></span>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    tableIndex: {
      type: Number,
    },
    copyTextName: {
      type: String,
    },
    columnName: {
      type: String,
    },
  },
  data() {
    return {
      currentHover: '',
      index: -1,
      visible: false,
      isShowCopy: false,
    }
  },
  created() {},
  mounted() {},
  methods: {
    mouseOver(index, type) {
      this.index = index
      if (type) {
        this.currentHover = type
      }
      //是否有省略号，有省略号才显示复制和悬浮窗
      this.isShowEllipse()
      // this.visible = true;
    },
    mouseleave() {
      this.currentHover = ''
      this.visible = false
    },
    onCopy() {
      event.stopPropagation()
      this.$message.success('复制成功')
    },
    onError() {
      this.$message.error('复制失败')
    },
    isShowEllipse() {
      var scrollWidth = this.$refs.showCopyBtn.scrollWidth
      var offsetWidth = this.$refs.showCopyBtn.offsetWidth
      // console.log("scrollWidth: ", scrollWidth)
      // console.log("offsetWidth: ", offsetWidth)
      if (scrollWidth > offsetWidth) {
        this.isShowCopy = true
        this.visible = true
      } else {
        // console.log("没有出现省略号")
        this.isShowCopy = false
        this.visible = false
      }
    },
  },
}
</script>

<style lang="less">
.popover-self.el-popover--plain {
  padding: 8px !important;
  margin-left: -4px !important;
}
.copyBtn {
  cursor: pointer;
}
.el-popover {
  padding: 8px !important;
}
</style>
